<template>
  <div class="container">
    <div class="left-content">
      <a-menu
          v-model:selectedKeys="selectedKeys"
          mode="vertical"
      >
        <a-menu-item v-for="(item, index) in userTypes"  :key="item.id">
          {{item.name}}
        </a-menu-item>
      </a-menu>
    </div>
    <div class="right-content">
      <user-list :key="selectedKeys.toString()" :type-id="selectedKeys.toString()"/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'
import {Tabs} from 'ant-design-vue'
import SplitPanel from '@/components/split-panel/index.vue'
import {roleList} from '@/api/user'
import UserList from './list/index.vue'

export default defineComponent({
  name: "user-index",
  components: {SplitPanel, [Tabs.name]: Tabs, [Tabs.TabPane.name]: Tabs.TabPane, UserList},
  async setup() {

    const state = reactive({
      selectedKeys: [''],
      userTypes: []
    })

    const {data} = await roleList({})
    state.userTypes = data
    state.selectedKeys = [data[0].id]


    const tabChange = (key) => {
      state.selectedKeys = [key]
    }

    return {
      ...toRefs(state),
      tabChange
    }
  }
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;

  .left-content {
    width: 256px;
    text-align: center;

    .ant-menu {
      height: 100%;
    }
  }

  .right-content {
    flex: auto;
    overflow: auto;
  }
}
</style>
